<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta property="og:title" content="专属生日惊喜">
    <meta property="og:image" th:content="@{/imgs/og-image.jpg}">
    <title>Happy Birthday!</title>
    <link th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<div id="particle-canvas"></div>

<div class="container">
    <!-- 3D生日卡片 -->
    <div class="card-3d">
        <div class="cake">
            <div class="candle"></div>
            <div class="flame"></div>
        </div>
        <h1 th:text="${name}">XXX</h1>
        <div class="gallery">
            <img th:each="photo : ${photos}"
                 th:src="@{/imgs/__${photo}__}"
                 class="parallax-img">
        </div>
        <button class="magic-btn">绽放祝福</button>
    </div>
</div>

<script th:src="@{/libs/three.r119.min.js}"></script>
<script th:src="@{/js/particles.js}"></script>
<script th:src="@{/js/fireworks.js}"></script>
</body>
</html>